<template>
  <div>
    <div class="head d-flex align-center justify-space-between">
      <span>定位信息</span>
    </div>
    <div class="body d-flex flex-column">
      <div class="tips d-flex align-center">
        <img src="~assets/images/endPoint.png" />
        <p>
          <span>基准定位：</span>
          <span>{{address}}</span>
        </p>
      </div>
      <div class="map-panel flex-grow-1">
        <el-amap :zoom="14" :events="events">
          <el-amap-marker v-for="(marker, index) in markers" :key="index" v-bind="marker"></el-amap-marker>
          <el-amap-info-window :position="[position.lng, position.lat]" :isCustom="true" :offset="[0, -10]" :contentRender="contentRender" :visible="infoWindow"></el-amap-info-window>
        </el-amap>
      </div>
    </div>
  </div>
</template>
<script>
  import Vue from "vue"
  import VueAMap from "vue-amap"
  Vue.use(VueAMap)
  VueAMap.initAMapApiLoader({
    key: "34fd4145be006b416cb88e5455c12dc3",
    plugin: [
      'Autocomplete',
      'PlaceSearch',
      'Scale',
      'OverView',
      'ToolBar',
      'MapType',
      'AMap.PolyEditor',
      'AMap.CircleEditor'
    ],
    v: "1.4.4"
  })
  import {
    latestLocation
  } from '@/api/customer'
  export default {
    props: {
      imei: [String, Number]
    },
    data() {
      const _this = this
      return {
        markers: [],
        infoWindow: false,
        address: '',
        position: {
          lng: 0,
          lat: 0
        },
        events: {
          init(o) {
            _this.o = o
          },
          complete() {
            _this.initLocation()
          }
        }
      }
    },
    methods: {
      contentRender(h) {
        const _this = this
        return h("div", {
            class: 'white info-window',
          }, [
            h('i', {
              class: 'el-icon-circle-close close',
              on: {
                click() {
                  _this.infoWindow = false
                }
              }
            }),
            h('p', {
              class: 'time',
              domProps: { innerHTML: _this.position.time },
              on: {
                click() {
                  _this.infoWindow = false
                }
              }
            }),
            h('p', {
              class: 'address',
              domProps: { innerHTML: _this.position.address },
              on: {
                click() {
                  _this.infoWindow = false
                }
              }
            })
          ]
        )
      },
      initLocation() {
        const _this = this
        latestLocation(this.imei).then(res => {
          const json = res.data
          if (json) {
            this.address = json.address
            this.position = {
              lng: json.lng,
              lat: json.lat,
              address: json.address,
              time: json.time
            }
            const arr = [json]
            this.markers = arr.map(item => {
              return {
                position: [item.lng, item.lat],
                offset: [-10, -10],
                clickable: false,
                animation: "AMAP_ANIMATION_DROP",
                contentRender(h) {
                  return h("img", {
                    domProps: { src: require("assets/images/endPoint.png") },
                    style: { width: "31px", height: "39px" },
                    on: {
                      click() {
                        _this.infoWindow = true
                        _this.position = item
                      }
                    }
                  })
                }
              }
            })
            this.$nextTick(() => {
              this.o.setFitView()
            })
          }
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .head {
    padding: 14px 20px;
    color: #262626;
    font-size: 16px;
    border-bottom: 1px solid #E9E9E9;
  }

  .body {
    height: 539px;
    padding: 20px;
    .tips {
      margin-bottom: 28px;
      img {
        width: 16px;
        height: 20px;
        margin-right: 6px;
      }
      span {
        font-size: 14px;
        &:nth-child(1) {
          color: #000;
        }
        &:nth-child(2) {
          color: #595959;
        }
      }
    }
  }

  ::v-deep.map-panel {
    .info-window {
      padding: 20px 20px 10px 20px;
      position: relative;
      width: 200px;
      .close {
        font-size: 15px;
        position: absolute;
        top: 5px;
        right: 5px;
      }
      .address, .time {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.65);
      }
    }
  }
</style>